<template>
    <div>
    <div>
<el-form :model="search" style=" margin: 20px 0 0 20px;" ref="search" label-width="100px">
  <el-row>
    <el-col :span="4" style=" margin-right: 20px;">
      <el-form-item label="供应商">
        <el-input v-model="search.Key" placeholder="请输入供应商名称/编号" style="width: 100%;"/>
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-form-item label="状态">
        <el-select v-model="search.Status" placeholder="请选择" style="width: 100%;">
          <el-option label="启用" value="启用"></el-option>
          <el-option label="停用" value="停用"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="4" style=" margin-right: 20px;">
      <el-form-item label="所属行业">
        <el-input v-model="search.Industry" placeholder="请输入" style="width: 100%;"/>
      </el-form-item>
    </el-col>
    <el-col :span="4" style=" margin-right: 20px;">
      <el-form-item label="进货负责人">
        <el-input v-model="search.Representative" placeholder="请输入" style="width: 100%;"/>
      </el-form-item>
    </el-col>
    <el-col :span="2">
      <el-button class="cz" type="primary" @click="clear()">重置</el-button>
    </el-col>
    <el-col :span="2">
      <el-button class="cx" type="primary" @click="query()">查询</el-button>
    </el-col>
  </el-row>
</el-form>
</div>
<div><el-button class="cx" type="primary" style="margin-left:20px;" @click="add()">新增</el-button></div>
<div id="dataDiv">
      <el-table :data="data" class="bian">
        <el-table-column label="序号" prop="s_MIndex"></el-table-column>
        <el-table-column label="供应商编码" prop="s_MSupplierCode"></el-table-column>
        <el-table-column label="供应商" prop="s_MSupplierName"></el-table-column>
        <el-table-column label="所属行业" prop="s_MIndustry"></el-table-column>
        <el-table-column label="供应商分类" prop="s_MSupplierCategory"></el-table-column>
        <el-table-column label="联系人" prop="s_MContactPerson"></el-table-column>
        <el-table-column label="联系电话" prop="s_MContactNumber"></el-table-column>
        <el-table-column label="电子邮箱" prop="s_MEmailAddress"></el-table-column>
        <el-table-column label="进货部门" prop="s_MPurchasingDepartment"></el-table-column>
        <el-table-column label="进货负责人" prop="s_MPurchasingRepresentative"></el-table-column>
        <el-table-column label="状态" prop="s_MStatus"></el-table-column>
        <el-table-column label="供应商地址" prop="s_MSupplierAddress"></el-table-column>
        <el-table-column label="账户名称" prop="s_MAccountName"></el-table-column>
        <el-table-column label="纳税人识别号" prop="s_MTaxpayerIdentification"></el-table-column>
        <el-table-column label="银行账户" prop="s_MBankAccount"></el-table-column>
        <el-table-column label="开户银行" prop="s_MBankName"></el-table-column>
        <el-table-column label="开户行地址" prop="s_MBankAddress"></el-table-column>
        <el-table-column label="操作人" prop="s_MOperator"></el-table-column>
        <el-table-column label="操作时间" prop="s_MOperatorTime"></el-table-column>
        <el-table-column label="备注" prop="s_MRemarks" v-if="showIdInput"></el-table-column>
        <el-table-column label="逻辑删除" prop="s_MIsDelete" v-if="showIdInput"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="upd(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
    </div>
    <!-- 模态框部分 -->
    <!-- 添加页面 -->
  <el-dialog title="新增" :visible.sync="insert" width="50%">
  <el-form :model="insertAdd" ref="insertFrom" label-width="100px">
    <el-row>
      <el-col :span="12">
        <span class="xin">*</span><el-form-item label="供应商编码" prop="Code">
          <el-input v-model="insertAdd.Code"  placeholder="自动获取系统编号" disabled readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <span class="xin">*</span><el-form-item label="供应商名称" prop="Name">
          <el-input v-model="insertAdd.Name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="所属行业" prop="Industry">
          <el-input v-model="insertAdd.Industry"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="供应商分类" prop="Category">
          <el-input v-model="insertAdd.Category"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="联系人" prop="Person">
          <el-input v-model="insertAdd.Person"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话" prop="Number">
          <el-input v-model="insertAdd.Number"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="电子邮箱" prop="Email">
          <el-input v-model="insertAdd.Email"></el-input>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="进货部门" prop="Department">
          <el-input v-model="insertAdd.Department"></el-input>
        </el-form-item>
      </el-col> -->
      </el-row>
      <el-row>
      <el-col :span="12">
        <el-form-item label="进货负责人" prop="Representative">
          <el-input v-model="insertAdd.Representative"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">  
    <el-form-item label="状态" prop="status">  
        <el-radio-group v-model="insertAdd.status">  
            <el-radio label="启用">启用</el-radio>  
            <el-radio label="停用">停用</el-radio>  
        </el-radio-group>  
    </el-form-item>  
</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="供应商地址" prop="Address">
          <el-input type="textarea" v-model="insertAdd.Address" :rows="1"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="Remarks">
          <el-input type="textarea" v-model="insertAdd.Remarks" :rows="4"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="账户名称" prop="AccountName">
          <el-input v-model="insertAdd.AccountName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="纳税人识别号" prop="Identification">
          <el-input v-model="insertAdd.Identification"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row>
      <el-col :span="12">
        <el-form-item label="银行账户" prop="Account">
          <el-input v-model="insertAdd.Account"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="开户银行" prop="BankName">
          <el-input v-model="insertAdd.BankName"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row>
      <el-col :span="24">
        <el-form-item label="开户行地址" prop="BankAddress">
          <el-input type="textarea" v-model="insertAdd.BankAddress" :rows="1"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-col>
        <el-button class="cz" @click="cancel()">取消</el-button>
        <el-button class="cx" @click="addFrom('insertFrom')">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>
<!-- 修改页面-->
  <el-dialog title="编辑" :visible.sync="uinsert" width="50%">
  <el-form :model="insertUpd" ref="insertFrom" label-width="100px">
   <el-row v-if="showIdInput">
  <el-col :span="12">
    <el-form-item label="序号" prop="id">
      <el-input v-model="insertUpd.id"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="逻辑删除" prop="isDelete">
      <el-input v-model="insertUpd.isDelete"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="操作时间" prop="OperatorTime">
      <el-input v-model="insertUpd.OperatorTime"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="操作人" prop="Operator">
      <el-input v-model="insertUpd.Operator"></el-input>
    </el-form-item>
  </el-col>
</el-row>
    <el-row>
      <el-col :span="12">
        <span class="xin">*</span><el-form-item label="供应商编码" prop="Code">
          <el-input v-model="insertUpd.Code"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <span class="xin">*</span><el-form-item label="供应商名称" prop="Name">
          <el-input v-model="insertUpd.Name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="所属行业" prop="Industry">
          <el-input v-model="insertUpd.Industry"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="供应商分类" prop="Category">
          <el-input v-model="insertUpd.Category"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="联系人" prop="Person">
          <el-input v-model="insertUpd.Person"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话" prop="Number">
          <el-input v-model="insertUpd.Number"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="电子邮箱" prop="Email">
          <el-input v-model="insertUpd.Email"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="进货部门" prop="Department">
          <el-input v-model="insertUpd.Department"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row>
      <el-col :span="12">
        <el-form-item label="进货负责人" prop="Representative">
          <el-input v-model="insertUpd.Representative"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">  
    <el-form-item label="状态" prop="status">  
        <el-radio-group v-model="insertUpd.status">  
            <el-radio label="启用">启用</el-radio>  
            <el-radio label="停用">停用</el-radio>  
        </el-radio-group>  
    </el-form-item>  
</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="供应商地址" prop="Address">
          <el-input type="textarea" v-model="insertUpd.Address" :rows="1"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="Remarks">
          <el-input type="textarea" v-model="insertUpd.Remarks" :rows="4"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="账户名称" prop="AccountName">
          <el-input v-model="insertUpd.AccountName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="纳税人识别号" prop="Identification">
          <el-input v-model="insertUpd.Identification"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row>
      <el-col :span="12">
        <el-form-item label="银行账户" prop="Account">
          <el-input v-model="insertUpd.Account"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="开户银行" prop="BankName">
          <el-input v-model="insertUpd.BankName"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row>
      <el-col :span="24">
        <el-form-item label="开户行地址" prop="BankAddress">
          <el-input type="textarea" v-model="insertUpd.BankAddress" :rows="1"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-col>
        <el-button class="cz" @click="cancel()">取消</el-button>
        <el-button class="cx" @click="updFrom('insertFrom')">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            data:[],
            showIdInput: false,
            targetPage: "",
            totalRecords: 10,
            currentPage: 1,
            totalPages: 10,
            pageSize: 10,
            insert:false,
            uinsert:false,
            insertAdd:{
                Code:"",
                Name:"",
                Industry:"",
                Category:"",
                Person:"",
                Number:"",
                Email:"",
                Department:"",
                Representative:"",
                status:"启用",
                Address:"",
                Remarks:"",
                AccountName:"",
                Identification:"",
                Account:"",
                BankName:"",
                BankAddress:"",
            },
            insertUpd:{
                id:"",
                isDelete:"",
                OperatorTime:"",
                Operator:"",
                Code:"",
                Name:"",
                Industry:"",
                Category:"",
                Person:"",
                Number:"",
                Email:"",
                Department:"",
                Representative:"",
                status:"",
                Address:"",
                Remarks:"",
                AccountName:"",
                Identification:"",
                Account:"",
                BankName:"",
                BankAddress:"",
            },
            search:{
                Key:'',
                Status:'',
                Industry:'',
                Representative:'',
            },
            //编号
     orderNumber:'',
            }
        },
    methods: {
       generateCode() {
      // 生成随机大写字母
      const randomLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));

      // 生成当前日期
      const currentDate = new Date().toISOString().slice(0, 10).replace(/-/g, '');

      // 生成4个随机数字
      const randomDigits = Math.floor(1000 + Math.random() * 9000);

      // 组合成编号
      return randomLetter + currentDate + randomDigits;
    },
         //查询
        fill(){
        axios.get('http://localhost:5084/api/Suppliermanagement/FenYe/FenYe',{
            params: {
            pageSize: this.pageSize,
            currentPage: this.currentPage
       }
        })
          .then(res => {
            this.data = res.data;
            this.totalRecords = res.data.length;
            this.totalPages = Math.ceil(this.totalRecords / this.pageSize); // 计算总页数
          })
       },
       //模糊查询
      query() {
  // 查询数据逻辑
  const { Key, Status,Industry,Representative } = this.search;
  axios.get('http://localhost:5084/api/Suppliermanagement/FenYe/FenYe', {
    params: {
      pageSize: this.pageSize,
      currentPage: this.currentPage,
      Key: Key,
      Status: Status,
      Industry:Industry,
      Representative:Representative,
    } 
  }).then((response) => {
    this.data = response.data;
  }).catch((error) => {
    console.log(error);
  });
},
 //点击新增显示弹框
add() {
  this.insert = true;
},
//点击关闭弹框
cancel() {
  this.insert = false;
  this.uinsert = false;
},
//添加
 addFrom(insertFrom) {
    var t = this;
    this.orderNumber = this.generateCode();
    this.$refs[insertFrom].validate((valid) => {
      if (valid) {
        axios.post("http://localhost:5084/api/Suppliermanagement/Add", {
            s_MSupplierCode:this.orderNumber,
            s_MSupplierName: t.insertAdd.Name,
            s_MIndustry: t.insertAdd.Industry,
            s_MSupplierCategory: t.insertAdd.Category,
            s_MContactPerson: t.insertAdd.Person,
            s_MContactNumber: t.insertAdd.Number,
            s_MEmailAddress: t.insertAdd.Email,
            s_MPurchasingDepartment: t.insertAdd.Department,
            s_MPurchasingRepresentative: t.insertAdd.Representative,
            s_MStatus: t.insertAdd.status,
            s_MSupplierAddress: t.insertAdd.Address,
            s_MAccountName: t.insertAdd.AccountName,
            s_MTaxpayerIdentification: t.insertAdd.Identification,
            s_MBankAccount: t.insertAdd.Account,
            s_MBankName: t.insertAdd.BankName,
            s_MBankAddress: t.insertAdd.BankAddress,
            s_MRemarks: t.insertAdd.Remarks,
          })
          .then(res => {
            if (res) {
              this.$message({
                message: '添加成功！',
                type: 'success'
              });
              this.insert = false;
              t.fill();
                 // 清空表单数据
            t.insertAdd.Code= '';
             t.insertAdd.Name= '';
             t.insertAdd.Industry= '';
             t.insertAdd.Category= '';
             t.insertAdd.Person= '';
             t.insertAdd.Number= '';
             t.insertAdd.Email= '';
             t.insertAdd.Department= '';
             t.insertAdd.Representative= '';
             t.insertAdd.Address= '';
             t.insertAdd.AccountName= '';
             t.insertAdd.Identification= '';
             t.insertAdd.Account= '';
             t.insertAdd.BankName= '';
             t.insertAdd.BankAddress= '';
             t.insertAdd.Remarks= '';
            }
          })
          .catch(err => {
            this.$message({
              message: '添加失败！',
              type: 'error'
            });
          });
      }
    });
  },
   upd(row){
  this.uinsert = true;

  this.insertUpd.id=row.s_MIndex;
  this.insertUpd.isDelete=row.s_MIsDelete;
  this.insertUpd.OperatorTime=row.s_MOperatorTime;
  this.insertUpd.Operator=row.s_MOperator;
  this.insertUpd.Code=row.s_MSupplierCode;
  this.insertUpd.Name=row.s_MSupplierName;
  this.insertUpd.Industry=row.s_MIndustry;
  this.insertUpd.Category=row.s_MSupplierCategory;
  this.insertUpd.Person=row.s_MContactPerson;
  this.insertUpd.Number=row.s_MContactNumber;
  this.insertUpd.Email=row.s_MEmailAddress;
  this.insertUpd.Department=row.s_MPurchasingDepartment;
  this.insertUpd.Representative=row.s_MPurchasingRepresentative;
  this.insertUpd.status=row.s_MStatus;
  this.insertUpd.Address=row.s_MSupplierAddress;
  this.insertUpd.Remarks=row.s_MRemarks;
  this.insertUpd.AccountName=row.s_MAccountName;
  this.insertUpd.Identification=row.s_MTaxpayerIdentification;
  this.insertUpd.Account=row.s_MBankAccount;
  this.insertUpd.BankName=row.s_MBankName;
  this.insertUpd.BankAddress=row.s_MBankAddress;
},
//修改
updFrom: function () {
  var t = this;
  var tt={
    s_MSupplierCode:t.insertUpd.Code,
    s_MIsDelete:t.insertUpd.isDelete,
    s_MOperatorTime:t.insertUpd.OperatorTime,
    s_MOperator:t.insertUpd.Operator,
    s_MSupplierName: t.insertUpd.Name,
    s_MIndustry: t.insertUpd.Industry,
    s_MSupplierCategory: t.insertUpd.Category,
    s_MContactPerson: t.insertUpd.Person,
    s_MContactNumber: t.insertUpd.Number,
    s_MEmailAddress: t.insertUpd.Email,
    s_MPurchasingDepartment: t.insertUpd.Department,
    s_MPurchasingRepresentative: t.insertUpd.Representative,
    s_MStatus: t.insertUpd.status,
    s_MSupplierAddress: t.insertUpd.Address,
    s_MAccountName: t.insertUpd.AccountName,
    s_MTaxpayerIdentification: t.insertUpd.Identification,
    s_MBankAccount: t.insertUpd.Account,
    s_MBankName: t.insertUpd.BankName,
    s_MBankAddress: t.insertUpd.BankAddress,
    s_MRemarks: t.insertUpd.Remarks,
  };
  // 调用修改接口，将this.xxx作为请求的数据发送给后端
  axios.put("http://localhost:5084/api/Suppliermanagement/Update",{
    s_MIndex:t.insertUpd.id,
    s_MSupplierCode:t.insertUpd.Code,
    s_MIsDelete:t.insertUpd.isDelete,
    s_MOperatorTime:t.insertUpd.OperatorTime,
    s_MOperator:t.insertUpd.Operator,
    s_MSupplierName: t.insertUpd.Name,
    s_MIndustry: t.insertUpd.Industry,
    s_MSupplierCategory: t.insertUpd.Category,
    s_MContactPerson: t.insertUpd.Person,
    s_MContactNumber: t.insertUpd.Number,
    s_MEmailAddress: t.insertUpd.Email,
    s_MPurchasingDepartment: t.insertUpd.Department,
    s_MPurchasingRepresentative: t.insertUpd.Representative,
    s_MStatus: t.insertUpd.status,
    s_MSupplierAddress: t.insertUpd.Address,
    s_MAccountName: t.insertUpd.AccountName,
    s_MTaxpayerIdentification: t.insertUpd.Identification,
    s_MBankAccount: t.insertUpd.Account,
    s_MBankName: t.insertUpd.BankName,
    s_MBankAddress: t.insertUpd.BankAddress,
    s_MRemarks: t.insertUpd.Remarks,
  })
    .then(res => {
      if (res) {
        this.$message({
          message: '修改成功！',
          type: 'success'
        });
        this.uinsert = false; // 关闭修改页面
        t.fill(); // 重新填充销售机会列表
      }
    })
    .catch(err => {
      this.$message({
        message: '修改失败！',
        type: 'error'
      });
      console.info(tt);
    });
},
  //点击按钮删除
  del: function (sale) {
    if (confirm("确定删除吗")) {
        var t = this;
        axios.put(`http://localhost:5084/api/Suppliermanagement/UpdIsDelete/UpdIsDelete?id=${sale.s_MIndex}&&isDeleted=${false}`)
            .then(function (response) {
                // 根据后台返回的结果处理相应逻辑
                if (response.data > 0) {
                    alert("删除成功");
                    t.fill(); // 如果删除成功，重新加载数据
                } else {
                    alert("删除失败");
                }
            })
            .catch(function (error) {
                console.error(error);
                alert("删除失败");
            });
    }
},
  clear() {
    // 清空搜索条件
  this.search.Key = '';
  this.search.Status = '';
  this.search.Industry = '';
  this.search.Representative = '';
  // 重新调用查询方法，以获取所有数据
  this.fill();
  },
        },
    mounted: function () {
        this.fill();
 } 
}
</script>

<style scoped>
.cz
{
margin-right: 20px; 
width: 80px; 
height: 40px; 
background-color: white; 
color: black;
border-color: #C1C1C1;
margin-left: 20px;
}
.cx
{
   width: 80px;
   height: 40px; 
   color: white;
   background-color: #45B984; 
}
.bian
{
    margin:20px;
}
 .el-dialog {
    max-height: 70%;
  }
  .xin{
  width:1px;
  height:1px;
  color: red;
  position: relative;
  left: 10px; /* 根据需要调整星号的水平位置 */
  top: 32px; /* 根据需要调整星号的垂直位置 */
}
.xinx{
  position: relative;
  left: 0px; /* 根据需要调整星号的水平位置 */
  top: 20px; /* 根据需要调整星号的垂直位置 */
}
</style>